<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 动画</title>
</head>
<style type="text/css">
    .con{
        width: 600px;
        height: 600px;
        border: 1px solid #000;
        margin: 50px auto;
        transform-style: preserve-3d;
    }
    .con img {
        position: absolute;
        left: 0;
        top: 0;
        transform: perspective(400px) rotateY(0deg) ;
        transition: all 500ms ease;
        backface-visibility: hidden;
    }
    .con:hover img{
        transform: perspective(400px) rotateY(-180deg);
    }
    .con .back {
        width: 400px;
        height: 400px;
        background-color: darkcyan;
        position: absolute;
        left: 0px;
        top: 0px;
        font-size: 30px;
        text-align: center;
        line-height: 400px;
        transition: 500ms ease;
        transform:  perspective(800px) rotateY(180deg);
    }
    .con:hover .back{
        transform:perspective(800px) rotateY(0deg);
    }

    
    </style>
</head>
<body>
    <div class="con">
        <img src="../images/cola.jpeg">
        <div class="back">
            something here
        </div>
    </div>
</body>
</html>